<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/scripts/jquery-1.7.1.js"></script>
</head>
<body>

	<div id="mydiv"
		style="position: absolute; width: 50px; width: 50px; height: 50px; background: #f00; left: 0px"></div>
	<span id="left"></span>
</body>

<script type="text/javascript">
		//setInterval 间歇执行
		var object=document.getElementById("mydiv");
		var span=document.getElementById("left");
		//var leftLen=0;
		function changeStyle(){
			//object.style.left=parseInt(object.style.left)+20+'px';
			//leftLen+=(parseInt(object.style.left)/2+20);
			//object.style.left=leftLen+'px';
			//span.innerHTML=object.style.left;
			object.style.left=parseInt(object.style.left)+(100-parseInt(object.style.left))/2+'px';
			if(100-parseInt(object.style.left)<=1){
				//alert(parseInt(object.style.left));
				clearInterval(timer);
			}
		}
		//var timer=setInterval(changeStyle,40);
		
		
		
		function changeStyle2(){
			object.style.left=t*c/d+b+'px';
			if(t<d){
				setTimeout(changeStyle2,10);
				t++;
			}else{
				
			}
		}
		//changeStyle2();
		var t=0,c=500,d=40,b=0;
		
		function nowPosition(t,c,d,b){
			return c*(t/=d)*t+b;
		}
		function changeStyle3(){
			object.style.left=nowPosition(t,c,d,b)+'px';
			t++;
			if(t<=d){
				setTimeout(changeStyle3,20);
			}
		}
		changeStyle3();
		
</script>
</html>